<!--
* @author wn
* @date 2022/08/03 11:48:09
* @description: 购物车入口页面
* v-model 1 modelValue 取值 2 @update:modelValue 改值
* 数据在 vuex中  修改 必须经过 actions 所以无法直接 v-model
* 拆分 :modelValue=vuex.XX   @change=(xxx)
!-->
<template>
	<div class="cart-page container">
		<!-- 面包屑 -->
		<xtx-bread>
			<xtx-bread-item to="/">首页</xtx-bread-item>
			<xtx-bread-item> 购物车</xtx-bread-item>
		</xtx-bread>
		<!-- 购物车主体 是一个表格 table th 表头 居中 加粗-->
		<section class="cart">
			<table>
				<!-- 表头 -->
				<thead>
					<tr>
						<th width="120">
							<xtx-check-box
								@change="$store.dispatch('cart/checkCartAll', $event)"
								:modelValue="$store.getters['cart/isCheckedAll']"
							>
								全选
							</xtx-check-box>
						</th>
						<th width="400">商品信息</th>
						<th width="220">单价</th>
						<th width="180">数量</th>
						<th width="180">小计</th>
						<th width="140">操作</th>
					</tr>
				</thead>
				<!-- 表身 -->
				<tbody>
					<!-- 有效商品为空  占位 UI  -->
					<tr v-if="!$store.getters['cart/validList'].length">
						<td colspan="6"><cart-none /></td>
					</tr>
					<!-- 有效商品 -->
					<tr
						v-for="good in $store.getters['cart/validList']"
						:key="good.skuId"
					>
						<td>
							<!-- v-model="item.selected" -->
							<xtx-check-box
								@change="
									$store.dispatch('cart/updateCartImmediate', {
										skuId: good.skuId,
										selected: $event,
									})
								"
								:modelValue="good.selected"
							></xtx-check-box>
						</td>
						<td>
							<div class="good">
								<router-link :to="`/product/${good.id}`">
									<img :src="good.picture" alt="" />
								</router-link>
								<div>
									<p class="name ellipsis">{{ good.name }}</p>
									<!-- 选择规格组件 购物车指定skuId 默认选中状态-->
									<cart-sku
										@changeGood="changeGood(good.skuId, $event)"
										:attrs="good.attrsText"
										:skuId="good.skuId"
									/>
								</div>
							</div>
						</td>
						<td class="tc">
							<p>&yen;{{ good.nowPrice }}</p>
							<p v-if="good.price + 1 - good.nowPrice">
								比加入时降价
								<span class="red">
									&yen;
									{{
										(Math.round(good.price * 100) -
											Math.round(good.nowPrice * 100)) /
										100
									}}
								</span>
							</p>
						</td>
						<td class="tc">
							<xtx-number-box
								:max="good.stock"
								@change="
									$store.dispatch('cart/updateCartImmediate', {
										skuId: good.skuId,
										count: $event,
									})
								"
								:modelValue="good.count"
							></xtx-number-box>
						</td>
						<td class="tc">
							<p class="f16 red">
								&yen;{{ (Math.round(good.nowPrice * 100) * good.count) / 100 }}
							</p>
						</td>
						<td class="tc">
							<p><a href="javascript:;">移入收藏夹</a></p>
							<p>
								<a
									class="green"
									href="javascript:;"
									@click="deleteCart(good.skuId)"
								>
									删除
								</a>
							</p>
							<p><a href="javascript:;">找相似</a></p>
						</td>
					</tr>
				</tbody>
				<!-- 无效商品 colspan跨列合并 6 算上自身 是6列并一列 -->
				<tbody v-if="$store.getters['cart/invalidList'].length">
					<tr>
						<td colspan="6"><h3 class="tit">失效商品</h3></td>
					</tr>
					<tr v-for="i in $store.getters['cart/invalidList']" :key="i.skuId">
						<td><xtx-check-box style="color: #eee" /></td>
						<td>
							<div class="good">
								<router-link to="/">
									<img :src="i.picture" alt="" />
								</router-link>
								<div>
									<p class="name ellipsis">
										{{ i.name }}
									</p>
									<p class="attr">{{ i.attrsText }}</p>
								</div>
							</div>
						</td>
						<td class="tc">
							<p>&yen;{{ i.nowPrice }}</p>
						</td>
						<td class="tc">{{ i.count }}</td>
						<td class="tc">
							<p>&yen;{{ (Math.round(i.nowPrice * 100) * i.count) / 100 }}</p>
						</td>
						<td class="tc">
							<p><a class="green" href="javascript:;">删除</a></p>
							<p><a href="javascript:;">找相似</a></p>
						</td>
					</tr>
				</tbody>
			</table>
		</section>
		<!-- 操作栏 -->
		<div class="action">
			<div class="batch">
				<xtx-check-box
					@change="$store.dispatch('cart/checkCartAll', $event)"
					:modelValue="$store.getters['cart/isCheckedAll']"
					>全选</xtx-check-box
				>
				<a href="javascript:;" @click="batchDeleteCart(false)">删除商品</a>
				<a href="javascript:;">移入收藏夹</a>
				<a href="javascript:;" @click="batchDeleteCart(true)">清空失效商品</a>
			</div>
			<div class="total">
				<span>
					共 {{ $store.getters['cart/validTotalCount'] }} 件商品，已选择
					{{ $store.getters['cart/selectedTotalCount'] }}
					件，商品合计：
				</span>
				<span class="red"
					>¥ {{ $store.getters['cart/selectedTotalPrice'] }}</span
				>
				<xtx-button
					@click="checkout"
					:type="
						$store.getters['cart/selectedList'].length > 0 ? 'primary' : 'gray'
					"
				>
					下单结算
				</xtx-button>
			</div>
		</div>
		<!-- 猜你喜欢 -->
		<goods-relevant> 猜你喜欢 </goods-relevant>
	</div>
</template>
<script>
import GoodsRelevant from '@/views/goods/components/GoodsRelevant'
import CartNone from './components/CartNone'
import CartSku from './components/CartSku'
import Confirm from '@/components/library/confirm'
import { useStore } from 'vuex'
import Message from '@/components/library/message'
import { useRouter } from 'vue-router'

export default {
	name: 'index',
	components: { GoodsRelevant, CartNone, CartSku },
	setup() {
		const store = useStore()
		// 单个删除购物车
		const deleteCart = async skuId => {
			try {
				// 弹出确认框  确定 调用resolve 取消 调用reject
				await Confirm({
					message: '亲，您是否确认删除选中的商品',
				})
				const message = await store.dispatch('cart/deleteCart', skuId)
				Message({ message })
			} catch (e) {
				// 取消 什么也不干  e.message
			}
		}
		// 批量删除购物车  无参为选中  true 为失效商品
		const batchDeleteCart = async parameter => {
			try {
				// 选中为 0  不操作
				await Confirm({
					message: `亲，您是否确认批量删除所有${
						parameter ? '失效' : '选中'
					}的商品`,
				})
				// 是 在action中循环选中列表  删除
				const message = await store.dispatch('cart/batchDeleteCart', parameter)
				Message({ message })
			} catch (e) {
				// 取消 什么也不干  e.message
			}
		}
		// 购物车 sku 组件修改规格  先将自己删除  在 插入修改后的
		// 这里将数据传给 vuex 来做处理
		const changeGood = (skuId, event) => {
			store.dispatch('cart/updateCartSku', [skuId, event])
		}
		/**
		 *  结算按钮
		 * 导航之前 拦截
		 * 1 判断是否选中商品
		 * 2 弹出确认框  提示 结算之前需要登陆
		 * 3 使用导航守卫 遇见需要登陆的路由 拦截 到 登陆页
		 *   router  index 中
		 */
		const router = useRouter()
		const checkout = async () => {
			if (!store.getters['cart/selectedList'].length > 0) {
				return Message({ type: 'warn', message: '至少选中一件商品才能结算' })
			}
			if (!store.state.user.profile.token) {
				try {
					await Confirm({
						message: '下单结算需要登录，您是否去登录？',
					})
					router.push('/member/checkout')
				} catch (e) {
					// 取消 什么也不干  e.message
				}
			} else {
				router.push('/member/checkout')
			}
		}
		return { deleteCart, batchDeleteCart, changeGood, checkout }
	},
}
</script>
<style scoped lang="less">
.cart {
	background: #fff;
	color: #666;
	table {
		// 设置相邻单元格的边框间的距离
		border-spacing: 0;
		// 相邻边被合并
		border-collapse: collapse;
		line-height: 24px;
		th,
		td {
			padding: 10px;
			border-bottom: 1px solid #f5f5f5;
			&:first-child {
				text-align: left;
				padding-left: 30px;
				color: #999;
			}
		}
		th {
			font-size: 16px;
			font-weight: normal;
			line-height: 50px;
		}
	}
}
.good {
	display: flex;
	align-items: center;
	img {
		width: 100px;
		height: 100px;
	}
	> div {
		width: 280px;
		font-size: 16px;
		padding-left: 10px;
		.attr {
			margin-top: 6px;
			font-size: 14px;
			color: #999;
		}
	}
}
.tc {
	text-align: center;
	.xtx-number-box {
		margin: 0 auto;
		width: 120px;
	}
}
.red {
	color: @priceColor;
}
.green {
	color: @xtxColor;
}
.f16 {
	font-size: 16px;
}
.tit {
	color: #666;
	font-size: 16px;
	font-weight: normal;
	line-height: 50px;
}
// 操作栏
.action {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 80px;
	background: #fff;
	margin-top: 20px;
	font-size: 16px;
	padding: 0 30px;
	.batch {
		.xtx-checkbox {
			color: #999;
		}
		a {
			margin-left: 20px;
		}
	}
	.total {
		.red {
			font-size: 18px;
			margin-right: 20px;
			font-weight: 700;
		}
	}
}
.goods-relevant {
	margin-bottom: 20px;
}
</style>
